<!--
@author [刘一笔 Sam]
@email [awesome_sam@qq.com]
@create date 2019-10-19 21:46:35
@modify date 2019-10-19 21:46:35
@desc [绝对宽度网格系统]
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>网格系统</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        width: 980px;
        margin: 0 auto;
      }

      .wrapper {
        /* 使得和col类里面的margin-left齐平 */
        padding-right: 20px;
      }
      .row {
        clear: both;
        margin-bottom: 10px;
      }
      .col {
        float: left;
        margin-left: 20px;
        width: 60px;
        background: rgb(255, 150, 150);
      }
      /* Two column widths (120px) plus one gutter width (20px) */
      .col.span2 {
        width: 140px;
      }
      /* Three column widths (180px) plus two gutter widths (40px) */
      .col.span3 {
        width: 220px;
      }
      /* And so on... */
      .col.span4 {
        width: 300px;
      }
      .col.span5 {
        width: 380px;
      }
      .col.span6 {
        width: 460px;
      }
      .col.span7 {
        width: 540px;
      }
      .col.span8 {
        width: 620px;
      }
      .col.span9 {
        width: 700px;
      }
      .col.span10 {
        width: 780px;
      }
      .col.span11 {
        width: 860px;
      }
      .col.span12 {
        width: 940px;
      }
      .offset-by-one {
        margin-left: 100px;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
        <div class="col">7</div>
        <div class="col">8</div>
        <div class="col">9</div>
        <div class="col">10</div>
        <div class="col offset-by-one">12</div>
      </div>
      <div class="row">
        <div class="col span1">1</div>
        <div class="col span6">6</div>
        <div class="col span3">3</div>
        <div class="col span2">2</div>
      </div>
      <div class="row">
        <div class="col span8">8</div>
        <div class="col span4">4</div>
      </div>
    </div>
  </body>
</html>
